/* -- Interdependent Settings -- */

/* Width of Main/Footer */
#footer, #container #main, #nav {
	width:70%;
}

/* Tables */
table * {
	padding:5px;
	border:1px solid #CCC;
}

/* CalendarView */
div.dateField {
  width: 140px;
  padding: 3px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  text-align: center;
}

div.dateField:hover {
  cursor: pointer;
}

/* Width of Sidebar */
#container #sidebar {
	width:29%;
}

/* Forms */
label {
	width:4em;
	float:left;
	text-align:right;
	margin-right:0.5em;
	margin-top:0.25em;
	display:block;
}

legend {
	border-width:1px;
	border-style:solid;
	padding:4px 6px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

fieldset {
	border-width:1px;
	border-style:solid;
	padding:5px 5px;
	width:20em;
}

input, select
{ 
	margin:2px;
}

.submit input 
{ 
	border-width:0;
	border-style:solid;
	float:right;
	padding:4px 6px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

/*
	Overall Body
*/
body, html {
	margin:0;
	padding:0;
	text-align:center;
	font-family:"Times New Roman",helvetica,arial,sans-serif;
}

/* Headers */
h1 {
margin:0;
}

h2 {
margin:0 0 1em;
}

/* Links */
a{
text-decoration:none;
outline:0;
}
a:visited
{
text-decoration:none;
color:blue;
}

#popup {
	display:none;
}

#currentdata #temperature *
{
	float:left;
	font-size:2em;
}
#currentdata #light
{
	float:left;
	margin:0.5em 5%;
}

#currentdata #door
{
	float:left;
	margin:0.5em 0;
}

#currentdata *:hover #popup
{
	clear:both;
	display:block;
	position:absolute;
	left:300px;
}
#currentdata #temperature:hover #popup
{
	margin:0.5em 0;
	font-size:1em;
}

/* 
	Overall Containing Element of the Entire Page 
	 - This sets the width of our entire page to 800 pixels and then centers it.
*/
#wrap {
width:800px;
position:relative;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
}

/*
	The main header of the page ("iRoomMonitor")
	Set the font size, add some padding so it isn't right against the top of the page
		and pull it in a little bit so it's not in line with the left of the "main" column
*/
#wrap > #header {
font-size:54px;
font-family:"Times New Roman",helvetica,arial,sans-serif;
padding:5px 15px;
margin:5px 0 10px 0;
}

/*
		Navigation Bar
		width - Make it fill the 100% the width of the entire page.
		margin - give a bit of space between it and the columns below.
		overflow - Anything that goes out of the width bounds will be hidden, so if there are too many options on the bar, it won't render them all
		position - Make it relative to the page, not absolute x and y coordinates
*/
#wrap #nav {
	width:100%;
	margin:5px 0;
	overflow:hidden;
	position:relative;
	font-family:verdana,sans-serif;
	clear:both;
}
	/* 
		Navigation Bar List - The navigation bar is essentially an html list (see an html reference for lists to understand the <ul> tag)
		float - makes it center itself in the page
		list-style - no bullet points or numbers or anything
		margin - no margin
		padding - no padding
		position - make this position relative to parent element
		left - Make this object's left position centered (so center the list)
		text-align - all list elements should center align their text
	*/
	#wrap #nav ul {
		 float:left;
		 list-style:none;
		 margin:0;
		 padding:0;
		 position:relative;
		 left:50%;
		 text-align:center;
	}
		/*
			Navigation Bar List Item - The actual list items (<li> tag) of the nav bar

			float - Position this object to the left of siblings (makes nav bar horizontal instead of vertical)
			padding - add some space between buttons
			position - make this relative to parent position
			right - move this half way right of parent (essentially centers the entire nav bar on the page).
		*/
		#wrap #nav ul li {
			float:left;
			padding:2px;
			position:relative;
			right:50%;
		}
			/*
				Navigation Bar List Item Link - The links within the list items (<a href="..."> tag
				display - Make the clickable link area an entire box instead of just the words (makes the nav bar into buttons, not boxes with links within them)
				padding - Make the clickable link area larger than just a small box surrounding the words
				text-decoration - Remove the underline from the link
				line-height - Make the font height area 130% the height of the actual font (gives the boxes some padding on top based on font size)
			*/
			#wrap #nav ul li a {
				display:block;
				padding:5px 10px;
				-moz-border-radius:6px;
				-webkit-border-radius:6px;
				border-radius:6px;
				text-decoration:none;
				line-height:1.3em;
			}

/*
	Container - Holds both the main and sidebar columns.
	clear - There cannot be any elements on either side of this item.  Essentially makes the container be below the navbar
	padding - no padding
	overflow - Anything extending beyond the width of this container do NOT show
*/
#container {
	clear:both;
	padding:0;
	overflow:visible;
}
	#container #main #sensor_select {
		border-bottom-width:2px;
		border-bottom-style:solid;
		padding:0 0 6% 0;
		margin:2% 0;
		position:relative;
	}

	#container #main #sensor_select > div {
		position:absolute;
		float:left;
		left:20%;
	}

	/*
		Container Main and Sidebar Headers
		font-size - make the font bigger for the headers
		padding - add some space above and below and on the left of the element
		margin - add a margin below the header
		width - Make the header bar span the entire element (considering the 2% padding)
	*/
	#container #main #header, #container #sidebar #header {
		font-size:125%;
		margin:0;
		padding:0;
		margin-bottom:1%;
		width:100%;
	}

	#container #main #header *, #container #sidebar #header * {
		padding:2%;
	}

	/*
		Container Main Subheader, Container Siderbar subheader
		padding - add a bit of padding around the header text
		width - make it span half the size of the parent column (whether sidebar or main)
		font-size - make the font size a bit smaller than the header
	*/
	#container #main #subheader, #container #sidebar #subheader {
		padding:6px;
		margin:0;
		width:40%;
		font-size:100%;
		border-top-right-radius:6px;
		border-bottom-right-radius:6px;
		-moz-border-radius-topright:6px;
		-moz-border-radius-bottomright:6px;
		-webkit-border-top-right-radius:6px;
		-webkit-border-bottom-right-radius:6px;
	}

	#container #main #subheader img, #container #sidebar #subheader img {
		float:right;
	}

	/*
		Container Main - The main column of the page (ie the part that isn't the sidebar)
		float - position this on the left side
		padding - no padding for this element
		margin - no margin for this element
	*/
	#container #main {
		float:left;
		padding:0;
		margin:0 0 1% 0;
		border-radius:6px;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
	}
		/*
			Container Main child element - Any element within the main column
			font-size - make the font a bit smaller
			padding - add some padding to the element so it's not right against the edges of the column
		*/
		#container #main > * {
			font-size:100%;
			margin:2%;
			padding:2%;
		}
		#container #main > form {
			margin:0;
			padding:1% 0;
		}
		
	/*
		Container Sidebar
		float - This element should be on the right of the previous elements
		margin - no margin
	*/
	#container #sidebar {
		float:right;
		border-radius:6px;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
	}
		/*
			Container Sidebar child element - All elements within the sidebar
			padding - add some padding (just like with main's child elements)
			font-size - make the font even smaller
		*/
		#container #sidebar > * {
			font-size:95%;
			padding:2%;
		}

		#container #sidebar #sidelink {
			float:right;
		}

#footer {
	clear:left;
	margin:1% 0;
	padding:0.25em 0;
	text-align:center;
	font-size:75%;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

#footer > * {
left:50%;
margin:0;
text-align:center;
}

* html #footer {
height:1px;
}









